<template>
  <div style="width: 100%;height: 100%; display: flex;flex-direction: column;">
    <div class="function-area">
   <!-- 返回按钮和标题 -->
      <div class="header">
        <button class="back-btn" @click="goBack">
          <img src="@/assets/xiangmujindu/arrow_right.png" style="width: 22px; transform: rotate(180deg);" /></button>
        <h3>考勤打卡</h3>
      </div>
      </div>
    <!--  -->
    <div style="background-color: #fff; padding: 6px 10px;margin: 10px 10px 10px;border-radius: 10px;">
  
      <div class="flexRow" style="margin: 16px 0;border-bottom: 1px solid #F4F5F9;margin: 10px 0;padding-bottom: 10px;position: relative;">
        <img :src="kqsp_icon_xm" class="imgTop" alt="" srcset="">
        <span class="fontBold">华东-2024年9月份阿里零星施工-布线项目</span>
                <img :src="zs_dkgd" style="width: 30px;position: absolute;top: -26px;right: -10px;" alt="" srcset="">

      </div>

      <div class="flexRow">
        <img :src="kqsp_icon_orientation" class="imgTop" alt="" srcset="">
        <span class="fontBold">万国数据中心常熟园区</span>
      </div>

      <div class="cccFont" style="margin-left: 20px;margin-top: 4px;">江苏省-苏州市-常熟市汪湾北路8~11号</div>

      <div class="flexRow" style="margin: 16px 0;font-size: 14px;">
        <img :src="kqsp_icon_pb" class="imgTop" alt="" srcset="">
        <span class="cccFont">排班计划:</span>
        <span class="orgFont">上班时间09:00</span>
        <span class="orgFont">下班时间18:00</span>
      </div>
    </div>

    <!--  -->
    <div style="flex: 1;background-color: #fff; padding: 6px 10px;border-radius: 24px 24px 0 0;">
      
      <div style="display: flex;justify-content: space-around;margin-top:12px;">
        <div style="padding: 10px 20px; width: 45%;background-color: #F4F5F9;border-radius: 10px;display: flex;flex-direction: column;">
          <span style="font-weight: bold;color:#1E2329;font-size:14px;">签到</span>
          <span style="color: #9D9E9F;font-size: 13px;display: flex;align-items: center;color:#999999;font-size:12px;margin-top:5px;">
            <img v-if="datime.shangban !== '未打卡'" :src="check_square" class="imgTop" style="width: 14px;margin-right:4px;" alt="" srcset="">
            {{ datime.shangban }}
          </span>
        </div>
        <div style="padding: 10px 20px; width: 45%;background-color: #F4F5F9;border-radius: 10px;display: flex;flex-direction: column;">
          <span style="font-weight: bold;color:#1E2329;font-size:14px;">签退</span>
          <span style="color: #9D9E9F;font-size: 13px;display: flex;align-items: center;color:#999999;font-size:12px;margin-top:5px;">
            <img v-if="datime.xiaban !== '未打卡'" :src="check_square" class="imgTop" style="width: 14px;margin-right: 4px;" alt="" srcset="">
            {{ datime.xiaban }}
          </span>
        </div>
      </div>
      
      <div class="dakayuan">
        <div style="text-align: center;" @click="tosign">
          <div style="color: #fff;font-weight: bold;margin-bottom: 6px;font-size: 18px;">{{ this.datime.shangban === '未打卡' ? '签到' : '签退' }}</div>
          <div style="color: #fff;">{{ curTime }}</div>
        </div>
      </div>

      <div>
        <div style="text-align: center;">
          <span style="color: #666666;font-size: 12px;">当前位置：江苏省-苏州市-常熟市 汪湾北路9号</span>
          <span style="color: #557DC4;font-size: 12px;margin-left: 10px;">刷新</span>
        </div>
        <div style="text-align: center;margin-top: 6px;display: flex;align-items: center;justify-content: center;">
          <img :src="check_square" class="imgTop" style="width: 14px;" alt="" srcset="">
          <span style="color: #666666;font-size: 12px;">已在打卡范围内</span>
        </div>
      </div>

    </div>

    <!--  -->

  </div>
</template>

<script>
import zs_dkgd from '@/assets/xiangmujindu/zs_dkgd.png'
import kqsp_icon_xm from '@/assets/xiangmujindu/kqsp_icon_xm.png'
import kqsp_icon_orientation from '@/assets/xiangmujindu/kqsp_icon_orientation.png'
import kqsp_icon_pb from '@/assets/xiangmujindu/kqsp_icon_pb.png'
import check_square from '@/assets/xiangmujindu/check-square.png'


export default {
  name: 'daiban',
  components: {
  },
  data() {
    return {
      zs_dkgd,
      kqsp_icon_xm,
      kqsp_icon_orientation,
      kqsp_icon_pb,
      check_square,

      datime: {
        shangban: '未打卡',
        xiaban: '未打卡'
      },
      curTime: new Date().getHours() + ':' + new Date().getMinutes()
    }
  },
  methods: {
    toRight () {
      this.$router.push({ name: 'kaoqinjilu' })
    },
    tosign () {
      if (this.datime.shangban === '未打卡') {
        this.datime.shangban = this.curTime
      } else {
        this.datime.xiaban = this.curTime
      }
    },
    goBack() {
      this.$router.go(-1);
    },
  },
  created () {
    setInterval(() => {
      this.curTime = new Date().getHours() + ':' + new Date().getMinutes()
    }, 1000);
  }
}
</script>

<style scoped>
/* 功能区 */
.function-area {
  background-color: white;
  padding: 10px;
}
.header {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.back-btn {
  position: absolute;
  left: 0px;
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
}
h1 {
  margin: 0;
}
.imgTop {
  display: inline-block;
  width: 18px;
  margin-right: 4px;
}
.fontBold {
  font-weight: bold;
  color: #242627;
  font-size: 14px;
}
.cccFont {
  font-size:14px;
  color:#6C7380;
}
.orgFont {
  color: #C99700;
  margin-left: 8px;
}
.flexRow {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.dakayuan {
  width: 40vw;
  height: 40vw;
  margin: 30px auto;
  background-image: url('@/assets/xiangmujindu/kqda_qd_bg.png');
  background-size: contain;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
